<template>
  <div class="label-div">
    <a-collapse>
      <a-collapse-panel key="1" header="所有标签" class="listHeader">
        <a-button v-for="(item,index) in labelList" :key="index" style="margin: 3px" @click="searchByLabel(item.id)">
          {{ item.name }}
        </a-button>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import {get} from "@/common";
import {ref} from "vue";

export default {
  name: "LabelList",
  emits:["add"],
  setup(props, {emit}) {
    const labelList = ref({});
    const getTagList = () => {
      get("/flow/labelList").then((res) => {
        labelList.value = res.data;
      })
    };
    getTagList();

    const searchByLabel = (id) => {
      emit('add', id);
    }
    return {
      labelList,
      searchByLabel,
    }
  }
}
</script>

<style scoped>
.label-div {
  height: 100%;
  background-color: white;
  border-radius: 5px;
  margin: 5px;
}

.listHeader {
  background-color: rgb(114, 147, 172);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px
}

.taskDescription {
  width: 60%;
}
</style>